import React from 'react';
import cs from 'classnames';
import styles from './actDetail.less';

// 按照升序排列数组
const sortArr = arr => {
  return arr.sort((a, b) => a.length - b.length);
};
let times={
  date:'',
  startTime:'',
  endTime:'',
}

// 比较数据，按照数据量最多的那一个来填充内容
const fillArr = (...arrList) => {
  const sortedArr = sortArr(arrList);
  const last = sortedArr[sortedArr.length - 1];
  //console.log('sortedArr', last);
  const finallArr = sortedArr.map(arr => {
    return last.map((c, index) => {
      const cell = arr[index];
      const first = arr[0];
      if (cell) {
        return cell;
      }
      if (!first) {
        return { keyId: index };
      }
      if (first.weekday) {
        return { keyId: `${first.date}-${first.weekday}_${index}` };
      } else if (first.hisId) {
        return { keyId: `${first.hisId}_${index}` };
      }

      return { keyId: `${first.startTime}-${first.endTime}_${index}` };
    });
  });
  return {
    riqi:finallArr.find(arr => arr[0] && arr[0].weekday) || finallArr[0],
    dateArr: finallArr.find(arr => arr[0] && arr[0].weekday) || finallArr[0],
    timeArr: finallArr.find(arr => arr[0] && arr[0].startTime) || finallArr[0],
    optArr: finallArr.find(arr => arr[0] && arr[0].hisId) || finallArr[0],
  };
};

const clickHandle = (opts, handle) => {
  console.log(opts)
  if (opts.keyId) {
    return;
  }
  if(opts.date){
    console.log(opts.date)
      times.date=opts.date
  }
  if(opts.startTime){
    times.date=opts.appointDate
    times.startTime=opts.startTime
    times.endTime=opts.endTime
  }
  console.log(times)
  handle(opts,times);
};

export default props => {
  const { clickDate, clickTime, currentDate, currentTime,writeOff } = props;
  const { dateArr, timeArr, optArr } = fillArr(
    props.dateData,
    props.timeData,
    props.optData
  );

  if(dateArr.length){
    times.date=dateArr[0].date
  }
  if(timeArr.length){
     times.startTime=timeArr[0].startTime
     times.endTime=timeArr[0].endTime 
  }

   console.log(times)
  return (
    <div className={styles['vertical-table']}>
      <div className={styles['list-date-con']}>
        <p className={styles.title}>日期</p >
        {dateArr.map(item => (
          <div
            key={item.keyId || item.date}
            className={cs({
              [styles.list]: true,
              [styles.active]: item.date === currentDate,
            })}
            onClick={() => {
              clickHandle(item, clickDate);
            }}
          >
            {item.date} {item.weekday}
          </div>
        ))}
      </div>
      <div className={styles['list-time-con']}>
        <p className={styles.title}>活动时间段</p >
        {timeArr.map(item => {
          const val = `${item.startTime}-${item.endTime}`;
          return (
            <div
              className={cs({
                [styles.list]: true,
                [styles.active]: val === currentTime,
              })}
              key={item.keyId || val}
              onClick={() => {
                clickHandle(item, clickTime);
              }}
            >
              {(item.keyId || item.keyId === 0) ? '' : `${item.startTime}-${item.endTime}`}
            </div>
          );
        })}
      </div>
      <div className={styles['list-opt-con']}>
        <p className={styles.title}>预约详情</p >
        {optArr.map(item => {
          if (item.keyId || item.keyId === 0) {
            return <div className={styles.list} key={item.keyId} />;
          }
          return (
            <div
              className={cs({
                [styles.list]: true,
                [styles.opt]: true,
              })}
              key={item.hisId}
            >
              <div className={styles['cell-con']}>
                <span className={styles['opt-key']}>会员手机号:</span>
                <span className={styles['opt-val']}>{item.userPhone}</span>
              </div>
              <div className={styles['state-con']}>
                
                <span className={styles['opt-val']}>
                  {item.isSign ? '已签到' : '未签到'}
                </span>
              </div>
              <div className={styles['cell-con']}>
                
                <span className={styles['opt-val']}>{item.appointSts==0?("未开始"):(item.appointSts==1?("进行中"):(item.appointSts==2?("已核销"):("缺席")))}</span>
              </div>
              <div> <a className={styles.btn} onClick={()=>{clickHandle(item,writeOff)}}>{item.isWriteOff ? '取消核销' : '核销'}</a ></div>
            </div>
          );
        })}
      </div>
    </div>
  );
};